<template>
  <div class="box">
    <div class="asideNav">
      <ul class="navlist">
        <li>
          <span class="iconfont icon-xiaoxi_huaban1-copy"></span>
        </li>
        <li>
          <span class="iconfont icon-liaotian"></span>
        </li>
        <li>
          <span class="iconfont icon-pengyou"></span>
        </li>
        <li>
          <span class="iconfont icon-shoucang1"></span>
        </li>
        <li>
          <span class="iconfont icon-pencil"></span>
        </li>
        <li>
          <span class="iconfont icon-shezhi"></span>
        </li>
        <li>
          <span class="iconfont icon-exit"></span>
        </li>
      </ul>
    </div>
    <div class="content">
      <div class="chats">
        <div class="chathead">
          <span>Chats</span>
          <ul>
            <li>
              <span class="iconfont icon-zu"></span>
              <span class="iconfont icon-liaotian"></span>
            </li>
          </ul>
        </div>
        <div class="search_chat">
          <input type="text" placeholder="search chat" />
        </div>
        <ul class="person">
          <li>
            <div class="personimg">
              <img
                src="https://img2.baidu.com/it/u=3502149281,2119482052&fm=26&fmt=auto&gp=0.jpg"
                alt=""
              />
            </div>
            <div class="pername">
              <p>Patsy Paulton</p>
              <p>Traditional heading elscas sdscsd sdcsdsc</p>
            </div>
          </li>
          <li>
            <div class="personimg">
              <img
                src="https://img2.baidu.com/it/u=3502149281,2119482052&fm=26&fmt=auto&gp=0.jpg"
                alt=""
              />
            </div>
            <div class="pername">
              <p>
                Karl Hubane
              </p>
              <p>Traditional heading elscas sdscsd sdcsdsc</p>
            </div>
          </li>
          <li>
            <div class="personimg">
              <img
                src="https://img2.baidu.com/it/u=3502149281,2119482052&fm=26&fmt=auto&gp=0.jpg"
                alt=""
              />
            </div>
            <div class="pername">
              <p>Entertainment Group</p>
              <p>Traditional heading elscas sdscsd sdcsdsc</p>
            </div>
          </li>
          <li>
            <div class="personimg">
              <img
                src="https://img2.baidu.com/it/u=3502149281,2119482052&fm=26&fmt=auto&gp=0.jpg"
                alt=""
              />
            </div>
            <div class="pername">
              <p>Jennica Kindred</p>
              <p>Traditional heading elscas sdscsd sdcsdsc</p>
            </div>
          </li>
          <li>
            <div class="personimg">
              <img
                src="https://img2.baidu.com/it/u=3502149281,2119482052&fm=26&fmt=auto&gp=0.jpg"
                alt=""
              />
            </div>
            <div class="pername">
              <p>
                Marvin Rohan
              </p>
              <p>Traditional heading elscas sdscsd sdcsdsc</p>
            </div>
          </li>
          <li>
            <div class="personimg">
              <img
                src="https://img2.baidu.com/it/u=3502149281,2119482052&fm=26&fmt=auto&gp=0.jpg"
                alt=""
              />
            </div>
            <div class="pername">
              <p>
                Frans Hanscombe
              </p>
              <p>Traditional heading elscas sdscsd sdcsdsc</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="chat_con" ref="div">
        <div class="chat_header">
          <div class="chUser">
            <div class="uphoto">
              <img
                src="https://img2.baidu.com/it/u=3502149281,2119482052&fm=26&fmt=auto&gp=0.jpg"
                alt=""
              />
            </div>
            <div class="uname">
              <p>Karl Hubane</p>
              <p>Online</p>
            </div>
          </div>
          <ul class="chAct">
            <li><span class="iconfont icon-dianhua1"></span></li>
            <li><span class="iconfont icon-shipin"></span></li>
            <li><span class="iconfont icon-gengduo"></span></li>
          </ul>
        </div>
        <div class="chat_body">
          <div class="messages">
            <div class="mychat">
              <p class="meg mymeg">
                Hey, Maher! I'm waiting for you to send me the files.
              </p>
              <p>Am 09:34 √√</p>
            </div>
            <div class="otherchat">
              <p class="meg othermeg">
                I'm sorry :( I'll send you as soon as possible.
              </p>
              <p>Pm 14:20</p>
            </div>
            <div class="mychat">
              <p class="meg mymeg">
                I'm waiting. Thank you :)
              </p>
              <p>Pm 14:25 √√</p>
            </div>
            <div class="otherchat">
              <p class="meg othermeg">
                I'm sending files now.
              </p>
              <p>Pm 14:20</p>
            </div>
            <div class="mychat">
              <p class="meg mymeg">
                Thank you so much. After I review these files, I will give you
                my opinion. If there's a problem, you can send it back. Good
                luck with!
              </p>
              <p>Pm 14:25 √√</p>
            </div>
            <div class="otherchat">
              <p class="meg othermeg">
                I can't waits
              </p>
              <p>Pm 14:20</p>
            </div>
            <div class="mychat">
              <p class="meg mymeg">
                I know how important this file is to you. You can trust me ;)
              </p>
              <p>Pm 14:25 √√</p>
            </div>
            <div class="otherchat">
              <p class="meg othermeg">
                Lorem ipsum dolor sit amet.
              </p>
              <p>Pm 14:20</p>
            </div>
          </div>
          <div class="messages">
            <div class="mychat" v-for="(item, index) in megList" :key="index">
              <p class="meg mymeg">
                {{ item.meg }}
              </p>
              <p>{{ item.time }} √√</p>
            </div>
          </div>
        </div>
        <div class="chat_footer">
          <form @submit.prevent>
            <input
              v-model="meg"
              placeholder="Recipient's username"
              class="inputcon"
              type="text"
              @keyup.enter="send"
            />
            <div class="inptype">
              <button>
                <span class="iconfont icon-iconfontcolor12"></span>
              </button>
              <button>
                <span class="iconfont icon-yuyin"></span>
              </button>
              <button @click="send">
                <span class="iconfont icon-fasong"></span>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      meg: '',
      time: '',
      megList: [],
    }
  },
  methods: {
    send() {
      if (this.meg === '') return alert('不能发送空消息')
      let dt = new Date()
      let hour = dt.getHours()
      let minute = dt.getMinutes()
      function addZero(n) {
        if (n < 10) return '0' + n
        return n
      }
      if (hour >= 12) {
        this.time = `Pm ${addZero(hour)}:${addZero(minute)}`
      } else {
        this.time = `Am ${addZero(hour)}:${addZero(minute)}`
      }
      console.log(hour, minute)
      this.megList.push({
        meg: this.meg,
        time: this.time,
      })
      this.meg = ''
    },
  },
}
</script>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
}
ul {
  list-style: none;
}
.box {
  display: flex;
  .asideNav {
    width: 70px;
    height: 100vh;
    background: #fff;
  }
  .content {
    flex: 1;
    padding: 30px;
    background: #ddd;
    display: flex;
    color: #212529;
    font-size: 14px;
  }
}
.chat_con {
  flex: 1;
}
.chats {
  width: 330px;
  margin-right: 30px;
  background: #fff;
  .chathead {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    span {
      font-size: 22px;
      font-weight: 600;
    }
    li {
      span {
        display: inline-block;
        padding: 10px 15px;
        background: #e6e6e6;
        margin-right: 10px;
        border-radius: 5px;
        font-size: 14px;
      }
    }
  }
}
.search_chat {
  padding: 10px 20px;
  input {
    outline: none;
    border: none;
    padding: 10px 15px;
    width: 260px;
    background: #ebebeb;
    border-radius: 5px;
  }
}
.person {
  li {
    display: flex;
    padding: 20px;
    border-bottom: 1px solid #ebebeb;
    img {
      width: 40px;
      border-radius: 40px;
    }
    .pername {
      margin-left: 10px;
    }
    p:first-child {
      font-size: 16px;
      font-weight: 500;
    }
    p:last-child {
      text-overflow: ellipsis;
      overflow: hidden;
      color: #969696;
      font-size: 14px;
      width: 234px;
      white-space: nowrap;
    }
  }
}
.navlist {
  li {
    width: 100%;
    text-align: center;
    padding: 15px 0;
    cursor: pointer;
    span {
      font-size: 23px;
    }
    &:first-child {
      height: 63px;
      background: #3db16b;
      margin-bottom: 10px;
      box-sizing: border-box;
      color: #fff;
      span {
        font-size: 35px;
        opacity: 0.5;
      }
    }
    &:nth-child(4) {
      margin-bottom: 310px;
      span {
        font-size: 18px;
      }
    }
    &:nth-child(3):after {
      content: '';
      width: 8px;
      height: 8px;
      position: absolute;
      background: #ff7373;
      border-radius: 50%;
    }
  }
}
.chat_header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  img {
    width: 64px;
    border-radius: 50%;
  }
  .chUser {
    display: flex;
  }
  .uname {
    margin-left: 15px;
    line-height: 24px;
    padding-top: 15px;
    box-sizing: border-box;
    p:nth-child(2) {
      font-size: 12px;
      color: #aaa;
    }
  }
  .chAct {
    li {
      display: inline-block;
      width: 44px;
      height: 38px;
      line-height: 38px;
      cursor: pointer;
      margin-left: 8px;
      background: #696969;
      text-align: center;
      border-radius: 5px;
      &:first-child {
        background: #0abb87;
        color: #fff;
      }
    }
  }
}
.chat_footer {
  margin-top: 20px;
  padding: 10px;
  background: #fff;
  border-radius: 5px;
  form {
    display: flex;
    .inputcon {
      display: block;
      width: 840px;
      height: 23px;
      padding: 6px 12px;
      border: none;
      outline: none;
    }
    .inptype {
      margin-left: auto;
      button {
        width: 35px;
        background: #e6e6e6;
        border-radius: 50%;
        height: 35px;
        border: none;
        margin-left: 8px;
        cursor: pointer;
        &:last-child {
          background: #3db16b;
          color: #fff;
        }
      }
    }
  }
}
.chat_body {
  height: 459px;
  overflow: auto;
  border-bottom: 2px solid #ccc;
  margin: 20px 0;
  &::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: #d0cdc7;
  }
  /* 滚动条中能上下移动的小块 */
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #a09d9d;
  }
  .messages {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .meg {
      padding: 10px 20px;
      border-radius: 5px;
    }
    .mychat {
      margin-left: auto;
      max-width: 75%;
      margin-bottom: 20px;
      p + p {
        font-size: 12px;
        color: #828282;
        text-align: right;
        margin-top: 5px;
      }
    }
    .otherchat {
      max-width: 75%;
      margin-bottom: 20px;
      p + p {
        font-size: 12px;
        color: #828282;
        margin-top: 5px;
      }
    }
  }
  .mymeg {
    background: #cdcdcd;
  }
  .othermeg {
    background: #fff;
  }
}
</style>
